<template>
    <div class="tabbar">
        <router-link to="/">
            <p><i class="iconfont icon-biaoqiankuozhan_shouye-291"></i></p>
            <p class="title">主页</p>
        </router-link>
        <router-link to="/design">
            <p><i class="iconfont icon-zhengfangti"></i></p>
            <p class="title">我的设计</p>
        </router-link>
        <router-link to="/person">
            <p><i class="iconfont icon-gerenzhongxin"></i></p>
            <p class="title">个人中心</p>
        </router-link>
    </div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
.tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1.1rem;
    background-color: #fbfbfb;
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    a {
        display: block;
        flex-grow: 1;
        color: #666;
        -webkit-tap-highlight-color:transparent;
        i {
            font-size: 0.45rem;
        }
        .title {
            font-size: 0.24rem;
            font-weight: bolder;
        }
    }
    .router-link-exact-active{
        // background-color: #e6e6e6;
        color: tomato;
    }
}
</style>